<template>
  <van-dialog
    :show="showDialog"
    title="注册"
    show-cancel-button
    @confirm="handleRegister"
  >
    <van-form ref="registerForm">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="confirmPassword"
        type="password"
        name="confirmPassword"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[
          { required: true, message: '请确认密码' },
          { validator: validateConfirmPassword, message: '两次密码不一致' },
        ]"
      />
      <van-field
        v-model="phoneNumber"
        name="phoneNumber"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
        ]"
      />
      <van-field
        v-model="gender"
        name="gender"
        label="性别"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请填写性别' }]"
      />
      <van-field
        v-model="email"
        name="email"
        label="邮箱"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请填写邮箱' },
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '邮箱格式不正确',
          },
        ]"
      />

      <van-field name="date" label="选择单个日期">
        <template #input>
          <van-cell title="" :value="date" @click="show = true" />
          <van-calendar :show="show" @confirm="onConfirm" />
        </template>
      </van-field>
      <van-field name="uploader" label="头像上传">
        <template #input>
          <van-uploader
            :after-read="afterRead"
            v-model="fileList"
            multiple
            :max-count="1"
          />
        </template>
      </van-field>
    </van-form>
  </van-dialog>
</template>
  
  <script>
import { ref, getCurrentInstance } from "vue";
import { Dialog, Form, Field, Uploader, Icon,showFailToast  } from "vant";

export default {
  name: "RegistrationDialog",
  /* eslint-disable */
  components: {
    VanDialog: Dialog,
    VanForm: Form,
    VanField: Field,
    VanUploader: Uploader,
    VanIcon: Icon,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const showDialog = ref(false);
    const username = ref("");
    const password = ref("");
    const confirmPassword = ref("");
    const phoneNumber = ref(null);
    const gender = ref(null);
    const avatar = ref([]);
    const registerForm = ref(null);
    const email = ref(null);
    const name = ref(null);
    const fileList = ref([
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
    //   {  isImage: true },
    ]);
    const date = ref("");
    const show = ref(false);

    const formatDate = (date) => {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    };
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };
    const afterRead = (file) => {
      const formData = new FormData();
      if (file.file.type.indexOf("image") !== -1) {
        // avatar.value = [{ ...file, content: URL.createObjectURL(file.file) }];
        formData.append("file", file.file);
      } else {
        showFailToast("上传头像图片只能是 JPG 格式!");  
        return
      }

      file.status = "uploading";
      file.message = "上传中...";

      proxy
        .$post("/api/files/uploadImage", formData)
        .then((res) => {
          if (res.status == "200") {
            fileList.value[0].url = res.data;
            file.status = "sucess";
            file.message = "上传成功";
          }
        })
        .catch((err) => {
          file.status = "failed";
          file.message = "上传失败";
        });
    };
    const handleRegister = () => {
        if (fileList.value.length === 0 || !fileList.value[0].url) {
            showFailToast("请上传头像"); 
         
          return;
        }
      const param = {
        userName: username.value,
        profilePhotoUrl:fileList.value[0].url,
        pPassword: password.value,
        pName: name.value,
        pGender: gender.value,
        pCard: null,
        pEmail: email.value,
        pPhone: phoneNumber.value,
        pBirthday: date.value,
      };
      proxy.$post("/patient/addPatient", param).then((res) => {
        console.log(res);
      });
    };

    const validateConfirmPassword = (val) => {
      return val === password.value || "两次密码不一致";
    };

    return {
      showDialog,
      username,
      password,
      confirmPassword,
      phoneNumber,
      avatar,
      registerForm,
      handleRegister,
      validateConfirmPassword,
      fileList,
      gender,
      afterRead,
      email,
      name,
      date,
      show,
      onConfirm,
    };
  },
};
</script>
  
  <style scoped>
/* 添加一些样式 */
.van-dialog__content {
}

.upload-avatar {
  /* display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px; */
}
</style>
  
  
  
  